<!--
 * @Author: scopesang
 * @Date: 2022-04-08 14:05:04
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 14:21:14
 * @FilePath: \cms-manage\src\router\01_路由的原理\router.html
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
-->
<!-- 1、定义视图，(点击)改变哈希地址 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="#/index">首页</a></li>
      <li><a href="#/list">列表页</a></li>
      <!-- 注意：href填的是hash地址，这里的 #/ 不要去掉 ，为的是不改变域名(地址栏中#前面的为域名)-->
    </ul>
    <div id="routerView"></div>
  </body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  // 2、定义路由
  let louter = {
    //路由名称     视图页面
    '#/index': './index.html',
    '#/list': './list.html'
  }
  // 通过 louter[键名] 来获取值
  console.log(louter['#/index'])

  //3、检测哈希地址的改变(事件监听)
  window.addEventListener('hashchange', () => {
    console.log('location.hash为: ', location.hash) //location.hash可以获取哈希地址
    // 可以看出location.hash就是我们的键，我们可以通过 louter[键名] 来获取值，即获取视图页面

    let url = louter[location.hash]
    // console.log(url)
    // 加载对应视图
    // 在<div id="routerView"></div>中load加载需要的视图页面
    $('#routerView').load(url)
  })
</script>
